<template>
  <el-dialog width="620px" title="工单详情" :visible.sync="dialog" :modal="true" :modal-append-to-body="false">
    <div style="height:400px;overflow:auto;" v-loading="loading">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="基本信息" name="1">
          <el-row>
            <el-col :span="12">
              <span class="fl" style="width:26%">工单类型：</span>
              <span
                class="fl"
                style="width:72%"
                v-text="info.orderCategory?info.orderCategory.name:''"
              ></span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:26%">客户名称：</span>
              <span class="fl" style="width:72%" v-text="info.customerName">我的客服名字</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:26%">客户电话：</span>
              <span class="fl" style="width:72%" v-text="info.phone">15680529067</span>
            </el-col>
             <el-col :span="12">
              <span class="fl" style="width:26%">组织机构：</span>
              <span class="fl" style="width:72%" v-text="info.dept?info.dept.name:''">尊古科技演示</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:26%">客户区域：</span>
              <span class="fl" style="width:72%">
                {{info.province?info.province.name:""}}
                -
                {{info.city?info.city.name:""}}
                -
                {{info.district?info.district.name:""}}
              </span>
            </el-col>
             <el-col :span="12">
              <span class="fl" style="width:26%">详细地址：</span>
              <span class="fl" style="width:72%" v-text="info.address">大源国际二期二栋</span>
            </el-col>
            <el-col :span="12">
              <span class="fl" style="width:26%">工单备注：</span>
              <span class="fl" style="width:72%" v-text="info.mark">这是备注杀对方水电费</span>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="关联的设备" name="2">
         <ul v-if="eqmt_list.length">
           <li class="pl10" v-for="it in eqmt_list" :key="it.id">
             {{it.name}}
           </li>
         </ul>
         <div v-else>暂无关联设备</div>
        </el-collapse-item>
        <el-collapse-item title="流程过程" name="3">
          <div  v-if="info.status===0">
            技术员未接单
          </div>
          <el-timeline v-else>
            <el-timeline-item :timestamp="new Date(item.createTime).format('yyyy-MM-dd hh:mm:ss')" placement="top" v-for="item in orderLogs" :key="item.id">
              <h4 class="bold" v-text="{'0':'创建订单','1':'技术员接单','2':'技术员安装完成','3':'技术员拒单','4':'管理员结束订单'}[item.status]"></h4>
              <p>执行人：{{item.user?item.user.username:''}}</p>
              <p>备注：{{item.mark}}</p>
              <ul v-if="item.status==2" class="mt20">
                <li v-for="it in images_list" :key="it" class="mb20">
                  <img style="max-width:100%;" :src="it" alt="">
                </li>
              </ul>
            </el-timeline-item>
          </el-timeline>
          <!-- <div v-else-if="info.status==2">
            订单已经完成
          </div> -->
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-dialog>
</template>

<script>
import { _ordersShow } from "@/http/ajax";
export default {
  props: {
    datarow: {
      type: Object,
      default: null
    }
  },
  name: "addnet",
  data() {
    return {
      activeNames: ["1", "2", "3"],
      dialog: false,
      loading: false,
      eqmt_list:[],
      images_list:[],
      defaultProps: {
        children: "children",
        label: "label"
      },
      info: {province:{},city:{},district:{}},
      orderLogs: []
    };
  },
  methods: {
    domInit(id) {
      this.dialog = true;
      this.loading = true;
      _ordersShow(
        id,
        res => {
          this.info = res;
          this.orderLogs = res.orderLogs;
            this.eqmt_list = res.equipments;
            if(res.images){
              this.images_list = res.images.split(',')
            }
          setTimeout(()=>{
            this.loading = false;
          },500)
        },
        err => {}
      );
    },
    handleChange(val) {
      console.log(val);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style lang="scss">
</style>
